$(document).ready(function(){
	//GLOBAL VARIABLES
	var version = "1.0";
	var source;
	var current_ios = 14;
	var current_watchos = 7;
	var type;
	var zoom;
	var selectedDisplay;
	var selectedModel;
	var appearance;
	var id;
	
	//DISABLE ZOOM
	document.addEventListener('gesturestart', function(e) {
		e.preventDefault();
		document.body.style.zoom = 1.0;
	});
	
	//FUNCTIONS
	var toolbarShadow = function(toolbar, target) {
		if (window.matchMedia("(pointer: coarse)").matches) {
			$(toolbar).scroll(function() {
				var y = $(toolbar).scrollTop();
				if (y > 48) {
					$(target).addClass("shadow");
				} else {
					$(target).removeClass("shadow");
				}
			});
		} else {
			$(toolbar).scroll(function() {
				var y = $(toolbar).scrollTop();
				if (y > 0) {
					$(target).addClass("shadow");
				} else {
					$(target).removeClass("shadow");
				}
			});
		};
	}
	
	var generateSupplementary = function() {
		//CLEAR OUT THE SUPPLEMENTARY COLUMN
		$("#supplementary").empty();
		$("#supplementary").removeClass("noSegmentedControl info");
		
		if (source == "carplay") {
			type = "displays";
			controlSegmented = ``;
			$("#supplementary").addClass("noSegmentedControl");
		} else {
			controlSegmented = `
				<div class="containerControlSegmented">
					<div class="controlSegmented" id="type">
						<button data-type="displays">Displays</button>
						<button data-type="models">Models</button>
					</div>
				</div>
			`
		}
		
		//SET THE SUPPLEMENTARY HEADER
		$("#supplementary").append(`
			<header>
				<button id="buttonSupplementaryBack">
					<svg width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
							<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z" fill="#000000" fill-rule="nonzero"></path>
						</g>
					</svg>
					<span>Devices</span>
				</button>
				<h1>${properties[source].name}</h1>
			</header>
			<div id="listDevices">
				${controlSegmented}
				<nav></nav>
			</div>
		`)
		
		$("#type button[data-type='" + type + "']").addClass("selected");
		
		//DISPLAY THE LIST OF DISPLAY SIZES IN THE SUPPLEMENTARY COLUMN
		if (type == "displays") {
			$.each( properties[source].categories, function( key, val ) {
				var modelCount = 0;
				$.each( val.models, function( key, val ) {
					modelCount++
				});
				if(modelCount == 0) {
					var modelInfo = ``
				} else {
					if(modelCount == 1) {
						var modelInfo = `<p class="caption">${modelCount} Model</p>`
					} else {
						var modelInfo = `<p class="caption">${modelCount} Models</p>`
					}
				}
				
				$("#listDevices nav").append(`
					<button data-id="${val.internalID}">
						<div>
							${deviceIcons[val.type]}
							<span>
								<p class="name">${val.name}</p>
								${modelInfo}
							</span>
						</div>
						<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
								<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z" fill="#000000" fill-rule="nonzero"></path>
							</g>
						</svg>
					</button>
				`);
			});
		}
		
		if (type == "models") {
			$.each( models[source], function( key, val ) {
				$("#listDevices nav").append(`
					<button data-id="${val.properties}" data-model="${key}">
						<div>
							<img src="images/devices/${source}-${key}.png" width="50" height="50" />
							<span>
								<p class="name">${val.name}</p>
								<p class="caption">${val.year}</p>
							</span>
						</div>
						<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
								<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z" fill="#000000" fill-rule="nonzero"></path>
							</g>
						</svg>
					</button>
				`);
			});
		}
		
		//TOOLBAR SCROLL SHADOW
		toolbarShadow("#listDevices", "#supplementary header");
	}
	
	var generateInfo = function() {
		//CLEAR OUT THE SUPPLEMENTARY COLUMN
		$("#supplementary").empty();
		$("#supplementary").addClass("noSegmentedControl info");
		
		//SET THE SUPPLEMENTARY HEADER
		$("#supplementary").append(`
			<header>
				<button id="buttonSupplementaryBack">
					<svg width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
							<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z" fill="#000000" fill-rule="nonzero"></path>
						</g>
					</svg>
					<span>Devices</span>
				</button>
				<h1>Info</h1>
			</header>
			<div id="listDevices">
				<h3>Settings</h3>
				<nav id="groupSettings">
					<button class="buttonSettings">
						<div>
							<svg class="iconInfo" width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
								<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
									<path d="M6.79258626,29.7854103 C7.93093262,29.7937672 9.00368652,29.29865 10.010848,28.2999521 C10.3747803,27.9360198 10.7365967,27.4789886 11.0962972,26.9288583 C11.4559977,26.3787281 11.8114665,25.7989755 12.1627035,25.1896005 C12.5139404,24.5802255 12.8503662,24.0047047 13.1719808,23.463038 C13.4935954,22.9213714 13.7940511,22.4770354 14.073348,22.1300302 L16.5997152,24.6690927 C17.082137,25.1599781 17.6047607,25.4075367 18.1675863,25.4117685 C18.7304118,25.4160003 19.2488037,25.181137 19.722762,24.7071787 L21.2842855,23.1202646 C21.7582438,22.6463063 21.995223,22.134262 21.995223,21.5841318 C21.995223,21.2785039 21.9194691,20.9820187 21.7679612,20.6946762 L21.7245277,20.6226318 L26.7559652,15.5919443 C27.441512,14.9063974 27.7779378,14.1764169 27.7652425,13.4020029 C27.7525472,12.6275888 27.3949626,11.8891448 26.6924886,11.1866708 L17.2725667,1.72866303 C16.9340251,1.39858491 16.5573975,1.18064871 16.1426839,1.07485444 C15.7279704,0.969060166 15.3196045,0.975407822 14.9175863,1.09389741 C14.515568,1.21238699 14.1622152,1.42609142 13.8575277,1.73501069 C13.5528402,2.04392996 13.3412516,2.45229584 13.222762,2.96010834 C13.00271,3.95034272 12.8122803,4.78188569 12.651473,5.45473725 C12.4906657,6.12758881 12.3404378,6.70310965 12.2007894,7.18129975 C12.061141,7.65948985 11.9066813,8.08901459 11.7374105,8.46987397 C11.5681396,8.85073334 11.3628988,9.23582449 11.1216878,9.62514741 L10.9956163,9.82545123 L10.9956163,9.82545123 L10.9225277,9.93863178 C10.6885476,9.83731726 10.4502469,9.7857196 10.2076253,9.78383881 C9.66172689,9.77960704 9.14333496,10.0187021 8.65244954,10.501124 L7.07823079,12.0626474 C6.612736,12.5450693 6.37998861,13.0634612 6.37998861,13.6178232 C6.37998861,14.1721852 6.62543132,14.6948089 7.11631673,15.1856943 L9.64268392,17.7120615 C9.30414225,17.9913583 8.86615397,18.29393 8.32871908,18.6197763 C7.79128418,18.9456227 7.21576335,19.2820484 6.60215658,19.6290537 C5.9885498,19.9760589 5.40668132,20.3294117 4.85655111,20.6891122 C4.3064209,21.0488128 3.85362142,21.4106292 3.49815267,21.7745615 C2.49099121,22.7901865 1.99164225,23.8671721 2,25.0055185 C2.00856934,26.1438649 2.52484538,27.2250823 3.54893392,28.2491708 C4.57302246,29.2647958 5.65423991,29.7768401 6.79258626,29.7854103 Z M20.3315277,19.0966318 L12.5465277,11.3226318 L12.7043269,11.0777243 C12.8141803,10.903099 12.9150519,10.7341736 13.0069417,10.5709482 C13.3285563,9.99965912 13.5972738,9.41567475 13.8130941,8.81899506 C14.0289144,8.22231537 14.2362712,7.54734793 14.4351644,6.79409272 C14.6340576,6.04083751 14.8773844,5.13100678 15.1651449,4.06460053 C15.2328532,3.77684011 15.3682699,3.60122162 15.5713949,3.53774506 C15.7745199,3.4742685 15.9691813,3.53562918 16.1553792,3.72182709 L21.7465277,9.29763178 C21.6029351,10.2226813 21.3092059,11.0406747 20.8653402,11.7516122 C20.3659912,12.5514169 19.7820068,13.2856292 19.113387,13.954249 C18.9525798,14.1235198 18.9398844,14.2800953 19.0753011,14.4239755 C19.2361084,14.5763193 19.5429118,14.5890146 19.9957113,14.4620615 C20.4485107,14.3351083 20.960555,14.1171721 21.5318441,13.8082529 C22.1031331,13.4993336 22.6532633,13.1459807 23.1822347,12.7481943 C23.5348823,12.4830033 23.837689,12.2215739 24.0906548,11.9639061 L24.2495277,11.7936318 L25.1055745,12.6466318 C25.3679443,12.9090016 25.4991292,13.1861826 25.4991292,13.4781747 C25.4991292,13.7701669 25.3806396,14.0388844 25.1436605,14.2843271 L20.3315277,19.0966318 Z M6.80528158,27.6842765 C6.16628418,27.6799977 5.55479329,27.3943531 4.97080892,26.8272958 C4.39528809,26.2433115 4.10541178,25.6275888 4.10113299,24.9801279 C4.09694824,24.3326669 4.378361,23.7296396 4.94541829,23.1710458 C5.41937663,22.6970875 5.99278158,22.2421721 6.66563314,21.8062997 C7.3384847,21.3704274 8.01768392,20.9599456 8.70323079,20.5748544 C9.38877767,20.1897633 10.0045003,19.8385263 10.5503988,19.5211435 C11.0962972,19.2037607 11.487736,18.9265797 11.7247152,18.6896005 C11.9786214,18.4187672 12.116154,18.1373544 12.1373128,17.8453622 C12.1584717,17.5533701 12.0505615,17.2931162 11.8135824,17.0646005 L8.90635579,14.1700693 C8.61013184,13.8738453 8.61013184,13.5733896 8.90635579,13.2687021 L9.85850423,12.3546396 C10.1631917,12.0499521 10.4636475,12.0457203 10.7598714,12.3419443 L19.4434652,21.0382333 C19.7396891,21.3259938 19.7354574,21.6222177 19.4307699,21.9269052 L18.5167074,22.853663 C18.2120199,23.1752776 17.9073324,23.1795094 17.6026449,22.8663583 L14.7208089,19.9718271 C14.4922933,19.7433115 14.2320394,19.6396331 13.9400472,19.6607919 C13.648055,19.6819508 13.3666423,19.8194833 13.0958089,20.0733896 C12.8588298,20.3103688 12.5816488,20.6996917 12.264266,21.2413583 C11.9468831,21.783025 11.597762,22.3987477 11.2169027,23.0885263 C10.8360433,23.778305 10.4276774,24.4575042 9.99180501,25.126124 C9.55593262,25.7947438 9.09678548,26.3660328 8.61436361,26.8399912 C8.04730632,27.4070484 7.44427897,27.6884612 6.80528158,27.6842765 Z M6.76084798,26.4972177 C7.15863444,26.4972177 7.49717611,26.3554534 7.77647298,26.0719247 C8.05576986,25.7883961 8.19541829,25.4477386 8.19541829,25.0499521 C8.19541829,24.6437021 8.05576986,24.3009287 7.77647298,24.0216318 C7.49717611,23.7423349 7.15863444,23.6026865 6.76084798,23.6026865 C6.35459798,23.6026865 6.01182454,23.7423349 5.73252767,24.0216318 C5.45323079,24.3009287 5.31358236,24.6437021 5.31358236,25.0499521 C5.31358236,25.4477386 5.45323079,25.7883961 5.73252767,26.0719247 C6.01182454,26.3554534 6.35459798,26.4972177 6.76084798,26.4972177 Z" fill="#000000" fill-rule="nonzero"></path>
								</g>
							</svg>
							<span>
								<p class="name">Appearance</p>
							</span>
						</div>
						<span class="value" id="appearance"></span>
						<ul class="menu" id="menuAppearance">
							<li data-option="system">System</li>
							<li data-option="light">Light</li>
							<li data-option="dark">Dark</li>
						</ul>
					</button>
					<button class="buttonSettings">
						<div>
							<svg class="iconInfo" width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
								<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
									<path d="M20.359375,26.6132812 C20.8867188,26.6132812 21.3085938,26.1914062 21.3085938,25.6757812 C21.3085938,25.1484375 20.8867188,24.7148438 20.359375,24.7148438 L18.9179688,24.7148438 L18.5898438,22.453125 L25.9257812,22.453125 C27.9296875,22.453125 28.9375,21.4921875 28.9375,19.4414062 L28.9375,6.01171875 C28.9375,3.9609375 27.9296875,3 25.9257812,3 L4.01171875,3 C2.0078125,3 1,3.9609375 1,6.01171875 L1,19.4414062 C1,21.4921875 2.0078125,22.453125 4.01171875,22.453125 L11.3476562,22.453125 L11.0078125,24.7148438 L9.68359375,24.7148438 C9.16796875,24.7148438 8.74609375,25.1484375 8.74609375,25.6757812 C8.74609375,26.1914062 9.16796875,26.6132812 9.68359375,26.6132812 L20.359375,26.6132812 Z M25.890625,20.5664062 L4.046875,20.5664062 C3.23828125,20.5664062 2.88671875,20.2382812 2.88671875,19.4179688 L2.88671875,6.046875 C2.88671875,5.21484375 3.23828125,4.88671875 4.046875,4.88671875 L25.890625,4.88671875 C26.6875,4.88671875 27.0507812,5.21484375 27.0507812,6.046875 L27.0507812,19.4179688 C27.0507812,20.2382812 26.6875,20.5664062 25.890625,20.5664062 Z" fill="#000000" fill-rule="nonzero"></path>
								</g>
							</svg>
							<span>
								<p class="name">View</p>
							</span>
						</div>
						<span class="value" id="view"></span>
						<ul class="menu" id="menuView">
							<li data-option="displays">Displays</li>
							<li data-option="models">Models</li>
						</ul>
					</button>
				</nav>
				<h3>About Screen Sizes</h3>
				<nav>
					<button data-id="versions">
						<div>
							<svg class="iconInfo" width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
								<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
									<path d="M19.6308594,26.2958984 C21.8017578,26.2958984 23.6298828,26.0927734 24.9248047,24.7978516 C26.2197266,23.5029297 26.4101562,21.7001953 26.4101562,19.5292969 L26.4101562,9.76660156 C26.4101562,7.59570312 26.2197266,5.78027344 24.9248047,4.49804688 C23.6298828,3.203125 21.8017578,3 19.6308594,3 L9.74121094,3 C7.60839844,3 5.78027344,3.203125 4.48535156,4.49804688 C3.19042969,5.79296875 3,7.60839844 3,9.72851562 L3,19.5292969 C3,21.7001953 3.19042969,23.5029297 4.48535156,24.7978516 C5.78027344,26.0927734 7.60839844,26.2958984 9.76660156,26.2958984 L19.6308594,26.2958984 Z M19.9863281,24.2519531 L9.42382812,24.2519531 C8.11621094,24.2519531 6.74511719,24.0742188 5.97070312,23.3125 C5.20898438,22.5380859 5.04394531,21.1923828 5.04394531,19.8720703 L5.04394531,9.44921875 C5.04394531,8.11621094 5.20898438,6.74511719 5.97070312,5.98339844 C6.74511719,5.20898438 8.12890625,5.04394531 9.46191406,5.04394531 L19.9863281,5.04394531 C21.2939453,5.04394531 22.6650391,5.22167969 23.4267578,5.98339844 C24.2011719,6.7578125 24.3662109,8.10351562 24.3662109,9.41113281 L24.3662109,19.8720703 C24.3662109,21.1923828 24.2011719,22.5380859 23.4267578,23.3125 C22.6650391,24.0742188 21.2939453,24.2519531 19.9863281,24.2519531 Z M14.6923828,20.5449219 C15.3271484,20.5449219 15.7714844,20.1005859 15.7714844,19.4658203 L15.7714844,15.6826172 L19.5546875,15.6826172 C20.1894531,15.6826172 20.6337891,15.2636719 20.6337891,14.6416016 C20.6337891,14.0068359 20.1894531,13.5625 19.5546875,13.5625 L15.7714844,13.5625 L15.7714844,9.79199219 C15.7714844,9.14453125 15.3271484,8.70019531 14.6923828,8.70019531 C14.0703125,8.70019531 13.6513672,9.14453125 13.6513672,9.79199219 L13.6513672,13.5625 L9.88085938,13.5625 C9.23339844,13.5625 8.7890625,14.0068359 8.7890625,14.6416016 C8.7890625,15.2636719 9.23339844,15.6826172 9.88085938,15.6826172 L13.6513672,15.6826172 L13.6513672,19.4658203 C13.6513672,20.1005859 14.0703125,20.5449219 14.6923828,20.5449219 Z" fill="#000000" fill-rule="nonzero"></path>
								</g>
							</svg>
							<span>
								<p class="name">Version History</p>
							</span>
						</div>
						<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
								<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z" fill="#000000" fill-rule="nonzero"></path>
							</g>
						</svg>
					</button>
					<button data-id="support">
						<div>
							<svg class="iconInfo" width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
								<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
									<path d="M14.9492188,27.8984375 C22.0332031,27.8984375 27.8984375,22.0205078 27.8984375,14.9492188 C27.8984375,7.86523438 22.0205078,2 14.9365234,2 C7.86523438,2 2,7.86523438 2,14.9492188 C2,22.0205078 7.87792969,27.8984375 14.9492188,27.8984375 Z M14.9492188,25.7402344 C8.95703125,25.7402344 4.17089844,20.9414062 4.17089844,14.9492188 C4.17089844,8.95703125 8.94433594,4.15820312 14.9365234,4.15820312 C20.9287109,4.15820312 25.7275391,8.95703125 25.7402594,14.9492188 C25.7529297,20.9414062 20.9414062,25.7402344 14.9492188,25.7402344 Z M14.6826172,17.5771484 C15.3173828,17.5771484 15.7109375,17.1835938 15.7109375,16.6757812 L15.7109375,16.5234375 C15.7109375,15.8125 16.1171875,15.3681641 17.0058594,14.7841797 C18.2373047,13.9716797 19.1132812,13.2226562 19.1132812,11.7119141 C19.1132812,9.59179688 17.234375,8.46191406 15.0761719,8.46191406 C12.8925781,8.46191406 11.4580078,9.49023438 11.1152344,10.6582031 C11.0517578,10.8740234 11.0009766,11.0771484 11.0009766,11.2929688 C11.0009766,11.8515625 11.4580078,12.1689453 11.8769531,12.1689453 C12.6005859,12.1689453 12.7148438,11.7753906 13.1210938,11.3056641 C13.5400391,10.6074219 14.1494141,10.1884766 15,10.1884766 C16.1552734,10.1884766 16.9042969,10.8359375 16.9042969,11.8134766 C16.9042969,12.6767578 16.3710938,13.0957031 15.2666016,13.8574219 C14.3525391,14.4921875 13.6669922,15.1650391 13.6669922,16.4091797 L13.6669922,16.5742188 C13.6669922,17.2470703 14.0351562,17.5771484 14.6826172,17.5771484 Z M14.6572266,21.3730469 C15.3935547,21.3730469 16.0283203,20.7890625 16.0283203,20.0527344 C16.0283203,19.3037109 15.40625,18.7324219 14.6572266,18.7324219 C13.9082031,18.7324219 13.2861328,19.3164062 13.2861328,20.0527344 C13.2861328,20.7763672 13.9208984,21.3730469 14.6572266,21.3730469 Z" fill="#000000" fill-rule="nonzero"></path>
								</g>
							</svg>	
							<span>
								<p class="name">Feedback and Support</p>
							</span>
						</div>
						<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
								<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z" fill="#000000" fill-rule="nonzero"></path>
							</g>
						</svg>
					</button>
					<button data-id="privacy">
						<div>
							<svg class="iconInfo" width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
								<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
									<path d="M13.9755859,28.6376953 C18.4316406,28.6376953 21.5800781,26.2255859 23.2685547,21.4648438 L25.5029297,15.1806641 C25.6552734,14.7490234 25.7314453,14.3300781 25.7314453,13.9492188 C25.7314453,12.6035156 24.7158203,11.6640625 23.4208984,11.6640625 C22.5449219,11.6640625 21.7578125,12.1845703 21.3261719,13.1875 L20.5009766,15.21875 C20.4755859,15.2695312 20.4375,15.3076172 20.3867188,15.3076172 C20.3232422,15.3076172 20.2978516,15.2568359 20.2978516,15.1933594 L20.2978516,5.01171875 C20.2978516,3.52636719 19.3710938,2.58691406 17.9492188,2.58691406 C17.4287109,2.58691406 16.9589844,2.77734375 16.6035156,3.10742188 C16.4384766,1.79980469 15.6005859,1 14.34375,1 C13.1123047,1 12.2490234,1.82519531 12.0585938,3.08203125 C11.7412109,2.76464844 11.2841797,2.58691406 10.8271484,2.58691406 C9.50683594,2.58691406 8.63085938,3.51367188 8.63085938,4.92285156 L8.63085938,6.33203125 C8.28808594,5.9765625 7.76757812,5.78613281 7.234375,5.78613281 C5.9140625,5.78613281 5,6.75097656 5,8.18554688 L5,19.0908203 C5,25.0322266 8.60546875,28.6376953 13.9755859,28.6376953 Z M13.9121094,26.8857422 C9.41796875,26.8857422 6.67578125,23.9912109 6.67578125,18.8876953 L6.67578125,8.36328125 C6.67578125,7.81738281 7.01855469,7.44921875 7.55175781,7.44921875 C8.07226562,7.44921875 8.453125,7.81738281 8.453125,8.36328125 L8.453125,14.8505859 C8.453125,15.3203125 8.83398438,15.6376953 9.24023438,15.6376953 C9.671875,15.6376953 10.0654297,15.3203125 10.0654297,14.8505859 L10.0654297,5.15136719 C10.0654297,4.60546875 10.4082031,4.22460938 10.9287109,4.22460938 C11.4619141,4.22460938 11.8300781,4.60546875 11.8300781,5.15136719 L11.8300781,14.203125 C11.8300781,14.6728516 12.2109375,14.9902344 12.6298828,14.9902344 C13.0615234,14.9902344 13.4423828,14.6728516 13.4423828,14.203125 L13.4423828,3.57714844 C13.4423828,3.03125 13.8105469,2.63769531 14.34375,2.63769531 C14.8515625,2.63769531 15.2197266,3.03125 15.2197266,3.57714844 L15.2197266,14.203125 C15.2197266,14.6474609 15.5751953,14.9902344 16.0195312,14.9902344 C16.4511719,14.9902344 16.8320312,14.6474609 16.8320312,14.203125 L16.8320312,5.15136719 C16.8320312,4.60546875 17.2001953,4.22460938 17.7207031,4.22460938 C18.2412109,4.22460938 18.609375,4.60546875 18.609375,5.15136719 L18.609375,17.6435547 C18.609375,18.2783203 18.9775391,18.6464844 19.5107422,18.6464844 C19.9677734,18.6464844 20.3486328,18.4433594 20.640625,17.8085938 L22.46875,13.7333984 C22.7099609,13.1875 23.1796875,12.9970703 23.6240234,13.1621094 C24.1191406,13.3398438 24.2714844,13.8095703 24.0429688,14.4316406 L21.7197266,20.9189453 C20.1708984,25.2480469 17.4541016,26.8857422 13.9121094,26.8857422 Z" fill="#000000" fill-rule="nonzero"></path>
								</g>
							</svg>	
							<span>
								<p class="name">Read Privacy Policy</p>
							</span>
						</div>
						<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
								<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z" fill="#000000" fill-rule="nonzero"></path>
							</g>
						</svg>
					</button>
				</nav>
				<h3>Other apps by Toast</h3>
				<nav>
					<button data-id="simplescales">
						<div>
							<img src="images/ui/simplescales.png" width="30px" height="30" alt="" />
							<span>
								<p class="name">Simple Scales</p>
							</span>
						</div>
						<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
								<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z" fill="#000000" fill-rule="nonzero"></path>
							</g>
						</svg>
					</button>
					<button data-id="lifecast">
						<div>
							<img src="images/ui/lifecast.png" width="30px" height="30" alt="" />
							<span>
								<p class="name">Lifecast</p>
							</span>
						</div>
						<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
								<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z" fill="#000000" fill-rule="nonzero"></path>
							</g>
						</svg>
					</button>
					<button data-id="typedex">
						<div>
							<img src="images/ui/typedex.png" width="30px" height="30" alt="" />
							<span>
								<p class="name">TypeDex</p>
							</span>
						</div>
						<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
								<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z" fill="#000000" fill-rule="nonzero"></path>
							</g>
						</svg>
					</button>
					<button data-id="critterdex">
						<div>
							<img src="images/ui/critterdex.png" width="30px" height="30" alt="" />
							<span>
								<p class="name">CritterDex</p>
							</span>
						</div>
						<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
								<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z" fill="#000000" fill-rule="nonzero"></path>
							</g>
						</svg>
					</button>
					<button data-id="linkbadges">
						<div>
							<img src="images/ui/linkbadges.png" width="30px" height="30" alt="" />
							<span>
								<p class="name">Link Badges</p>
							</span>
						</div>
						<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
								<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z" fill="#000000" fill-rule="nonzero"></path>
							</g>
						</svg>
					</button>
				</nav>
				<h3>Screen Sizes is crafted by</h3>
				<nav>
					<button data-id="chris">
						<div>
							<img src="https://cdn.toast-studio.com/avatars/chris.jpg" width="30px" height="30" alt="" style="border-radius: 50%;" />
							<span>
								<p class="name">Christopher Muller</p>
							</span>
						</div>
						<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
								<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z" fill="#000000" fill-rule="nonzero"></path>
							</g>
						</svg>
					</button>
					<button data-id="trevor">
						<div>
							<img src="https://cdn.toast-studio.com/avatars/trevor.jpg" width="30px" height="30" alt="" style="border-radius: 50%;" />
							<span>
								<p class="name">Trevor Kay</p>
							</span>
						</div>
						<svg class="chevron" width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
								<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z" fill="#000000" fill-rule="nonzero"></path>
							</g>
						</svg>
					</button>
				</nav>
				<p class="legal">Device images &copy;2007 Apple Inc. No copyright or trademark infringement is intended.</p>
				<div id="containerToast" data-id="toast">
					<svg width="148px" height="64px" viewBox="0 0 148 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="link" data-link="toast" id="toast">
						<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
							<g id="Settings/Light" transform="translate(-123.000000, -786.000000)" fill="#464646">
								<path d="M187.952097,795.543134 C180.215022,796.761025 172.991414,797.792598 165.675679,799.657889 C166.840263,800.178109 167.512314,801.184012 166.654426,802.898555 C159.025568,817.495719 150.897362,833.556733 142.678608,849.398457 C141.761573,851.342757 135.212684,848.040352 136.140186,846.245734 L159.557508,801.439439 C155.88315,802.674065 152.149644,804.138449 148.297843,806.062346 C130.981228,814.417904 127.218887,820.847963 128.355724,822.046986 C129.722339,823.305148 142.406782,813.242916 144.462234,811.444632 C146.507221,809.496665 148.353234,815.459343 143.213812,820.481559 C141.174059,822.504366 132.039954,828.482779 125.710375,825.089831 C120.320838,822.232805 123.891616,815.214485 128.414975,811.062626 C144.099653,796.579007 168.553473,791.334302 182.636915,789.447009 C184.802269,789.220385 190.930311,795.109256 187.952097,795.543134 Z M241.674894,802.296229 C242.945833,803.339925 243.865248,804.710221 242.98071,805.980148 C237.28423,814.457478 239.391972,819.972936 239.347589,827.904024 C239.280738,831.230901 240.696891,836.492702 236.645289,838.512623 C231.265858,841.178235 224.79567,839.513623 221.167928,834.656902 C216.361908,840.215418 211.691946,841.127372 208.874111,839.354051 C207.168911,838.27487 206.464497,836.676299 206.260475,834.818034 C202.402524,840.031292 197.840158,843.64598 192.630741,839.066774 C191.216928,837.80474 190.308746,836.467613 189.839332,835.005377 C187.092349,836.769909 183.839525,837.271308 180.992451,834.28615 C179.430542,836.815695 177.562444,839.291016 175.765861,840.626809 C170.246701,844.945776 165.924742,842.600765 164.572117,841.636457 C163.224755,840.747416 159.19165,839.289829 159.215175,834.220626 C159.347983,824.227494 165.867134,815.829935 169.042036,812.582517 C172.292169,809.329838 174.83426,808.925172 177.728362,810.311135 C186.099216,814.339535 186.479713,818.699769 184.4045,826.862213 C184.156204,827.635927 183.843204,828.565437 183.385003,829.580735 C183.743825,830.38763 184.172616,831.113998 184.715028,831.302975 C186.010658,831.695714 188.200185,830.385063 190.800109,826.518156 C191.5826,824.542636 192.681821,822.36699 194.034444,819.943695 C196.665243,815.190755 200.606588,811.170085 203.661815,809.308615 C206.221861,807.781377 208.017164,808.030343 210.506457,809.728807 C211.980077,810.674379 214.254176,811.414173 214.468622,813.421512 C216.511141,814.027698 218.731621,816.119465 218.135913,817.134837 C217.534992,818.075673 215.384487,821.222102 213.423115,824.954515 C211.124424,829.159924 208.492877,834.961535 210.734954,836.302779 C212.745452,837.510414 219.656002,827.824434 223.103664,822.040656 C223.189585,821.878999 223.313117,821.779101 223.461812,821.735 C228.489621,813.489106 233.395237,804.020402 235.524158,801.065229 C236.680457,799.398776 239.920128,800.757833 241.674894,802.296229 Z M175.1321,817.340626 C173.388169,818.992947 171.33805,821.584902 169.378451,825.471345 C166.689859,830.633062 165.191921,837.930562 167.064172,839.176977 C169.174447,840.636304 174.304541,833.161338 176.480867,829.183222 C176.744986,828.705641 177.003782,828.151913 177.331269,827.516864 C176.082045,824.543472 174.832292,820.498856 175.1321,817.340626 Z M198.544997,825.48605 C195.728091,830.273932 192.920303,836.265348 193.820291,837.331326 C194.555216,838.183064 198.163301,836.124504 204.97621,826.240507 L206.184204,824.199257 C207.980483,820.912698 210.649394,815.081515 209.455941,814.111319 C208.113137,813.151566 202.762501,818.191885 198.544997,825.48605 Z M266.316279,799.145669 C265.917379,799.933705 264.694232,801.919594 263.131616,804.46132 C267.735449,804.291417 272.677815,808.962757 267.708065,809.310276 C266.503277,809.394523 262.673594,809.814349 259.661624,810.024966 L259.262622,810.654214 C256.475748,815.057219 253.845785,819.373695 253.125831,820.439867 C250.270058,825.048391 247.777711,831.607874 249.378909,832.864165 C251.619527,834.607843 258.972405,833.713608 267.819763,819.564396 C268.703441,818.134345 272.830584,820.886319 270.0554,825.565223 C263.486624,836.590544 251.479816,839.102456 248.105665,836.297828 C239.036156,828.874514 243.862779,822.151803 248.200579,814.931173 C248.879518,813.819497 249.973224,812.146717 251.196372,810.160829 C245.624227,810.550471 245.415135,805.39612 247.222317,805.269749 C249.707192,805.09599 249.621314,804.949967 254.746952,804.667561 C257.748034,799.972862 260.689685,795.510361 260.894425,795.191987 C262.488778,793.104127 267.044069,797.650505 266.316279,799.145669 Z M232.57995,819.188374 C229.725464,823.464308 227.058679,827.34968 224.558581,830.544007 C225.434636,832.822863 226.592943,836.06332 228.885735,836.053967 C232.258854,836.120046 232.509811,829.45959 232.517506,823.420045 C232.560343,821.982785 232.531859,820.550513 232.57995,819.188374 Z M195.329933,786 C197.14841,786 198.526044,787.20983 198.581149,788.8446 L196.812768,788.8446 C196.717586,788.05971 196.121446,787.529785 195.329933,787.529785 C194.323007,787.529785 193.706829,788.389664 193.706829,789.794466 C193.706829,791.204268 194.323007,792.074145 195.334942,792.074145 C196.126456,792.074145 196.717586,791.564217 196.822787,790.789326 L198.586159,790.789326 C198.526044,792.439094 198.183477,793.60393 196.329933,793.60393 C194.165795,793.60393 191.833247,792.154134 191.833247,789.799465 C191.833247,787.444797 193.160785,786 195.329933,786 Z M248.461523,786.194973 C249.904281,786.194973 250.75591,786.874877 250.75591,787.994719 C250.75591,788.76961 250.174799,789.424518 249.408333,789.529503 L249.408333,789.62449 C250.355143,789.674483 251.086542,790.40938 251.086542,791.32925 C251.086542,792.594072 250.109674,793.408958 248.561714,793.408958 L245.090076,793.408958 L245.090076,786.194973 L248.461523,786.194973 Z M253.671484,786.194973 L255.079176,789.139558 L255.174358,789.139558 L256.57203,786.194973 L258.530776,786.194973 L256.041015,790.929306 L256.041015,793.408958 L254.207509,793.408958 L254.207509,790.929306 L251.712739,786.194973 L253.671484,786.194973 Z M237.831197,786.189973 C239.985316,786.189973 241.212663,787.474792 241.212663,789.729475 C241.212663,792.099142 240.005354,793.408958 237.831197,793.408958 L234.795392,793.408958 L234.795392,786.189973 L237.831197,786.189973 Z M233.227394,786.194973 L233.227394,787.669765 L230.111437,787.669765 L230.111437,789.109562 L233.04204,789.109562 L233.04204,790.459373 L230.111437,790.459373 L230.111437,791.934165 L233.227394,791.934165 L233.227394,793.408958 L228.272921,793.408958 L228.272921,786.194973 L233.227394,786.194973 Z M226.965421,786.194973 L226.965421,787.669765 L224.876427,787.669765 L224.876427,793.408958 L223.042921,793.408958 L223.042921,787.669765 L220.958937,787.669765 L220.958937,786.194973 L226.965421,786.194973 Z M220.007117,786.194973 L220.007117,787.669765 L216.926226,787.669765 L216.926226,789.314534 L219.721571,789.314534 L219.721571,790.719336 L216.926226,790.719336 L216.926226,793.408958 L215.087711,793.408958 L215.087711,786.194973 L220.007117,786.194973 Z M211.445747,786.194973 L213.875393,793.408958 L211.871561,793.408958 L211.420699,791.824181 L209.061188,791.824181 L208.595297,793.408958 L206.77181,793.408958 L209.196446,786.194973 L211.445747,786.194973 Z M203.09478,786.194973 C204.783007,786.194973 205.794942,787.084847 205.794942,788.574638 C205.794942,789.459513 205.354099,790.269399 204.562586,790.614351 L206.005345,793.408958 L203.941398,793.408958 L202.704032,790.884313 L201.752212,790.884313 L201.752212,793.408958 L199.913697,793.408958 L199.913697,786.194973 L203.09478,786.194973 Z M248.030699,790.249402 L246.928592,790.249402 L246.928592,792.11414 L248.040718,792.11414 C248.802174,792.11414 249.217969,791.779187 249.217969,791.169273 C249.217969,790.579356 248.792155,790.249402 248.030699,790.249402 Z M237.500565,787.664766 L236.633908,787.664766 L236.633908,791.934165 L237.500565,791.934165 C238.692845,791.934165 239.33908,791.194269 239.33908,789.76447 C239.33908,788.41966 238.657778,787.664766 237.500565,787.664766 Z M210.298553,787.819744 L210.203371,787.819744 L209.411858,790.504366 L211.075038,790.504366 L210.298553,787.819744 Z M202.834281,787.579778 L201.752212,787.579778 L201.752212,789.589495 L202.839291,789.589495 C203.515584,789.589495 203.91635,789.214548 203.91635,788.589636 C203.91635,787.974722 203.490536,787.579778 202.834281,787.579778 Z M247.970584,787.48979 L246.928592,787.48979 L246.928592,789.134559 L247.90045,789.134559 C248.571733,789.134559 248.962481,788.824603 248.962481,788.314674 C248.962481,787.799747 248.596781,787.48979 247.970584,787.48979 Z" id="toast_light"></path>
							</g>
						</g>
					</svg>
				</div>
				<p class="legal">Version ${version}</p>
			</div>
		`)
		
		//SET UP APPEARANCE CONTEXT MENU
		$("#menuAppearance li[data-option='" + appearance + "']").addClass("picked");
		$("#appearance").append(appearance);
		
		//SET UP VIEW CONTEXT MENU
		$("#menuView li[data-option='" + type + "']").addClass("picked");
		$("#view").append(localStorage.getItem("type"));
		
		//TOOLBAR SCROLL SHADOW
		toolbarShadow("#listDevices", "#supplementary header");
	}
	
	var generateDevice = function() {
		//CLEAR OUT THE MAIN PANEL
		$("main").empty();
		$("main").removeClass("noSegmentedControl");
		
		//SET THE HEADER
		switch (type) {
			case 'displays':
				var headingText = selectedDisplay.name;
				break;
			case 'models':
				var headingText = models[source][selectedModel].name;
				break;
			default:
				var headingText = "Device";
		}
		
		
		$("main").append(`
			<header>
				<button id="buttonMainBack">
					<svg width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
							<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z" fill="#000000" fill-rule="nonzero"></path>
						</g>
					</svg>
				</button>
				<h1>${headingText}</h1>
			</header>
			<div id="result"></div>
		`)
		
		if (navigator.share) {
			$("main header").append(`
				<button id="buttonShare">
					<svg viewBox="0 0 100 127" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
							<path d="M49.6914062,82.7148438 C52.2109375,82.7148438 54.3789062,80.6640625 54.3789062,78.203125 L54.3789062,21.71875 L53.96875,13.4570313 L57.6015625,17.4414062 L65.8046875,26.171875 C66.625,27.0507812 67.796875,27.5195312 68.96875,27.5195312 C71.3125,27.5195312 73.1875,25.8203125 73.1875,23.4765625 C73.1875,22.2460938 72.71875,21.3085938 71.8398438,20.4296875 L53.1484375,2.3828125 C51.9765625,1.2109375 50.921875,0.80078125 49.6914062,0.80078125 C48.4609375,0.80078125 47.40625,1.2109375 46.234375,2.3828125 L27.5429688,20.4296875 C26.6640625,21.3085938 26.1953125,22.2460938 26.1953125,23.4765625 C26.1953125,25.8203125 27.953125,27.5195312 30.3554688,27.5195312 C31.5273438,27.5195312 32.7578125,27.0507812 33.578125,26.171875 L41.7226562,17.4414062 L45.4140625,13.4570313 L45.0039062,21.71875 L45.0039062,78.203125 C45.0039062,80.6640625 47.171875,82.7148438 49.6914062,82.7148438 Z M81.5078125,126.367188 C93.2265625,126.367188 99.1445312,120.449219 99.1445312,108.847656 L99.1445312,54.4726562 C99.1445312,42.9296875 93.2265625,37.0117188 81.5078125,37.0117188 L66.2148438,37.0117188 L66.2148438,46.6210938 L81.15625,46.6210938 C86.4882812,46.6210938 89.5351562,49.4921875 89.5351562,55.1171875 L89.5351562,108.203125 C89.5351562,113.828125 86.4882812,116.699219 81.15625,116.699219 L18.1679688,116.699219 C12.7773438,116.699219 9.7890625,113.828125 9.7890625,108.203125 L9.7890625,55.1171875 C9.7890625,49.4921875 12.7773438,46.6210938 18.1679688,46.6210938 L33.1679688,46.6210938 L33.1679688,37.0117188 L17.8164062,37.0117188 C6.15625,37.0117188 0.12109375,42.8710938 0.12109375,54.4726562 L0.12109375,108.847656 C0.12109375,120.449219 6.15625,126.367188 17.8164062,126.367188 L81.5078125,126.367188 Z" id="share" fill-rule="nonzero"></path>
						</g>
					</svg>
				</button>
			`)
		}
		
		if (selectedDisplay.zoomed == undefined) {
			$("main").addClass("noSegmentedControl");
		} else {
			$("#result").append(`
				<div class="containerControlSegmented">
					<div class="controlSegmented" id="zoom">
						<button data-zoom="standard">Standard</button>
						<button data-zoom="zoomed">Zoomed</button>
					</div>
				</div>
			`)
		}
		
		$("#zoom button[data-zoom='" + zoom + "']").addClass("selected");
		
		//DISPLAY DETAILS
		$("#result").append(`<section id="details"></section>`)
		
		if (selectedDisplay.ppi == undefined) {
			var ppi = ``
		} else {
			var ppi = `
				<div class="row">
					<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
							<path d="M24.8613281,26.34375 C25.4238281,26.34375 25.7871094,25.96875 25.7871094,25.40625 L25.7871094,5.6953125 C25.7871094,5.1328125 25.4238281,4.76953125 24.8613281,4.76953125 L5.15039062,4.76953125 C4.58789062,4.76953125 4.21289062,5.1328125 4.21289062,5.6953125 L4.21289062,25.40625 C4.21289062,25.96875 4.58789062,26.34375 5.15039062,26.34375 L24.8613281,26.34375 Z M14.0566406,24.4570312 L6.43945312,24.4570312 C6.19335938,24.4570312 6.09960938,24.3632812 6.09960938,24.1171875 L6.09960938,16.4882812 C6.22851562,16.546875 6.36914062,16.5703125 6.52148438,16.5703125 C7.09570312,16.5703125 7.56445312,16.1132812 7.56445312,15.5390625 C7.56445312,14.9648438 7.09570312,14.4960938 6.52148438,14.4960938 C6.36914062,14.4960938 6.22851562,14.53125 6.09960938,14.5898438 L6.09960938,6.99609375 C6.09960938,6.73828125 6.19335938,6.65625 6.43945312,6.65625 L14.0449219,6.65625 C13.9863281,6.7734375 13.9628906,6.9140625 13.9628906,7.06640625 C13.9628906,7.640625 14.4316406,8.09765625 15.0058594,8.09765625 C15.5800781,8.09765625 16.0371094,7.640625 16.0371094,7.06640625 C16.0371094,6.9140625 16.0136719,6.7734375 15.9550781,6.65625 L23.5605469,6.65625 C23.8183594,6.65625 23.9003906,6.73828125 23.9003906,6.99609375 L23.9003906,14.5898438 C23.7714844,14.53125 23.6308594,14.4960938 23.4785156,14.4960938 C22.9042969,14.4960938 22.4355469,14.9648438 22.4355469,15.5390625 C22.4355469,16.1132812 22.9042969,16.5703125 23.4785156,16.5703125 C23.6308594,16.5703125 23.7714844,16.546875 23.9003906,16.4882812 L23.9003906,24.1171875 C23.9003906,24.3632812 23.8183594,24.4570312 23.5605469,24.4570312 L15.9433594,24.4570312 C16.0019531,24.328125 16.0371094,24.1757812 16.0371094,24.0117188 C16.0371094,23.4375 15.5800781,22.9804688 15.0058594,22.9804688 C14.4316406,22.9804688 13.9628906,23.4375 13.9628906,24.0117188 C13.9628906,24.1757812 13.9980469,24.328125 14.0566406,24.4570312 Z M15.0058594,10.921875 C15.5800781,10.921875 16.0371094,10.453125 16.0371094,9.87890625 C16.0371094,9.3046875 15.5800781,8.84765625 15.0058594,8.84765625 C14.4316406,8.84765625 13.9628906,9.3046875 13.9628906,9.87890625 C13.9628906,10.453125 14.4316406,10.921875 15.0058594,10.921875 Z M15.0058594,13.7578125 C15.5800781,13.7578125 16.0371094,13.2890625 16.0371094,12.7148438 C16.0371094,12.140625 15.5800781,11.6835938 15.0058594,11.6835938 C14.4316406,11.6835938 13.9628906,12.140625 13.9628906,12.7148438 C13.9628906,13.2890625 14.4316406,13.7578125 15.0058594,13.7578125 Z M15.0058594,16.5703125 C15.5800781,16.5703125 16.0371094,16.1132812 16.0371094,15.5390625 C16.0371094,14.9648438 15.5800781,14.4960938 15.0058594,14.4960938 C14.4316406,14.4960938 13.9628906,14.9648438 13.9628906,15.5390625 C13.9628906,16.1132812 14.4316406,16.5703125 15.0058594,16.5703125 Z M9.34570312,16.5703125 C9.91992188,16.5703125 10.3886719,16.1132812 10.3886719,15.5390625 C10.3886719,14.9648438 9.91992188,14.4960938 9.34570312,14.4960938 C8.77148438,14.4960938 8.31445312,14.9648438 8.31445312,15.5390625 C8.31445312,16.1132812 8.77148438,16.5703125 9.34570312,16.5703125 Z M12.1816406,16.5703125 C12.7558594,16.5703125 13.2128906,16.1132812 13.2128906,15.5390625 C13.2128906,14.9648438 12.7558594,14.4960938 12.1816406,14.4960938 C11.6074219,14.4960938 11.1503906,14.9648438 11.1503906,15.5390625 C11.1503906,16.1132812 11.6074219,16.5703125 12.1816406,16.5703125 Z M17.8300781,16.5703125 C18.4042969,16.5703125 18.8613281,16.1132812 18.8613281,15.5390625 C18.8613281,14.9648438 18.4042969,14.4960938 17.8300781,14.4960938 C17.2558594,14.4960938 16.7871094,14.9648438 16.7871094,15.5390625 C16.7871094,16.1132812 17.2558594,16.5703125 17.8300781,16.5703125 Z M20.6542969,16.5703125 C21.2285156,16.5703125 21.6972656,16.1132812 21.6972656,15.5390625 C21.6972656,14.9648438 21.2285156,14.4960938 20.6542969,14.4960938 C20.0800781,14.4960938 19.6230469,14.9648438 19.6230469,15.5390625 C19.6230469,16.1132812 20.0800781,16.5703125 20.6542969,16.5703125 Z M15.0058594,19.3945312 C15.5800781,19.3945312 16.0371094,18.9375 16.0371094,18.3632812 C16.0371094,17.7890625 15.5800781,17.3203125 15.0058594,17.3203125 C14.4316406,17.3203125 13.9628906,17.7890625 13.9628906,18.3632812 C13.9628906,18.9375 14.4316406,19.3945312 15.0058594,19.3945312 Z M15.0058594,22.2304688 C15.5800781,22.2304688 16.0371094,21.7617188 16.0371094,21.1875 C16.0371094,20.6132812 15.5800781,20.15625 15.0058594,20.15625 C14.4316406,20.15625 13.9628906,20.6132812 13.9628906,21.1875 C13.9628906,21.7617188 14.4316406,22.2304688 15.0058594,22.2304688 Z" id="􀮌" fill="#000000" fill-rule="nonzero"></path>
						</g>
					</svg>
					<div class="rowTitle">
						<p class="name">PPI</p>
						<p class="value">${selectedDisplay.ppi}</p>
					</div>
				</div>
			`
		}
		
		if (selectedDisplay.contrast == undefined) {
			var contrast = ``
		} else {
			var contrast = `
				<div class="row">
					<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
							<path d="M15,3 C21.627417,3 27,8.372583 27,15 C27,21.5254567 21.7914556,26.8343928 15.3049748,26.9962001 L15,27 L15,27 C8.372583,27 3,21.627417 3,15 C3,8.372583 8.372583,3 15,3 Z M15,5 C9.4771525,5 5,9.4771525 5,15 C5,20.5228475 9.4771525,25 15,25 L15,5 L15,5 Z" id="Combined-Shape" fill="#000000"></path>
						</g>
					</svg>
					<div class="rowTitle">
						<p class="name">Contrast Ratio</p>
						<p class="value">${selectedDisplay.contrast}</p>
					</div>
				</div>
			`
		}
		
		if (selectedDisplay.trueTone == undefined) {
			var trueTone = ``
		} else {
			var trueTone = `
				<div class="row">
					<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
							<path d="M14.9941406,23.7070312 C15.5566406,23.7070312 16.0253906,24.1757812 16.0253906,24.7265625 L16.0253906,24.7265625 L16.0253906,27.1875 C16.0253906,27.7382812 15.5566406,28.2070312 14.9941406,28.2070312 C14.4433594,28.2070312 13.9746094,27.7382812 13.9746094,27.1875 L13.9746094,27.1875 L13.9746094,24.7265625 C13.9746094,24.1757812 14.4433594,23.7070312 14.9941406,23.7070312 Z M20.7832031,21.2929688 C21.1816406,20.90625 21.8378906,20.90625 22.2246094,21.2929688 L22.2246094,21.2929688 L23.9824219,23.0390625 C24.3808594,23.4375 24.3808594,24.09375 23.9824219,24.4804688 C23.5957031,24.8671875 22.9394531,24.8789062 22.5527344,24.4921875 L22.5527344,24.4921875 L20.7832031,22.734375 C20.3964844,22.3359375 20.3964844,21.6796875 20.7832031,21.2929688 Z M7.75195312,21.2929688 C8.15039062,20.90625 8.81835938,20.90625 9.20507812,21.2929688 C9.59179688,21.6914062 9.59179688,22.3476562 9.19335938,22.734375 L9.19335938,22.734375 L7.44726562,24.4804688 C7.04882812,24.8671875 6.38085938,24.8554688 5.99414062,24.46875 C5.61914062,24.0820312 5.61914062,23.4140625 6.00585938,23.0273438 L6.00585938,23.0273438 Z M20.762651,17.0001027 C20.0849374,19.5569649 17.7343767,21.4804688 14.9941406,21.4804688 C12.2440476,21.4804688 9.89192085,19.5569649 9.21395846,17.0001027 Z M26.6542969,14.4726562 C27.2167969,14.4726562 27.6855469,14.9414062 27.6855469,15.4921875 C27.6855469,16.0429688 27.2167969,16.5117188 26.6542969,16.5117188 L26.6542969,16.5117188 L24.2050781,16.5117188 C23.6542969,16.5117188 23.1855469,16.0429688 23.1855469,15.4921875 C23.1855469,14.9414062 23.6542969,14.4726562 24.2050781,14.4726562 L24.2050781,14.4726562 Z M5.78320312,14.4726562 C6.34570312,14.4726562 6.81445312,14.9414062 6.81445312,15.4921875 C6.81445312,16.0429688 6.34570312,16.5117188 5.78320312,16.5117188 L5.78320312,16.5117188 L3.33398438,16.5117188 C2.78320312,16.5117188 2.31445312,16.0429688 2.31445312,15.4921875 C2.31445312,14.9414062 2.78320312,14.4726562 3.33398438,14.4726562 L3.33398438,14.4726562 Z M20.9384166,14.9998243 C20.952035,15.1623154 20.9589844,15.3265294 20.9589844,15.4921875 C20.9589844,15.6629585 20.9515994,15.8322269 20.9371366,15.9996838 L9.03942754,15.9996838 C9.02496312,15.8322269 9.01757812,15.6629585 9.01757812,15.4921875 C9.01757812,15.3265294 9.02452753,15.1623154 9.03814739,14.9998243 Z M20.405169,13.0000094 C20.5542022,13.3195458 20.6757303,13.6539049 20.7665724,13.9999231 L9.21003567,13.9999231 C9.30091077,13.6539049 9.42249571,13.3195458 9.57162693,13.0000094 Z M18.9018595,11.0001323 C19.2417198,11.2979979 19.5483103,11.6333779 19.8147422,11.9994208 L10.1625527,11.9994208 C10.4292718,11.6333569 10.7362549,11.2979594 11.0766496,11.000081 Z M14.9941406,9.515625 C15.8170776,9.515625 16.6048699,9.68835759 17.3227622,9.99925639 L12.6588081,9.99920657 C13.3783231,9.68833914 14.1682875,9.515625 14.9941406,9.515625 Z M22.5527344,6.50390625 C22.9394531,6.1171875 23.5957031,6.1171875 23.9824219,6.50390625 C24.3808594,6.90234375 24.3808594,7.55859375 23.9824219,7.95703125 L23.9824219,7.95703125 L22.2363281,9.703125 C22.0633257,9.88121573 21.8417175,9.97976973 21.613713,10.0016649 L21.4168394,10.0016438 C21.1849645,9.97942637 20.9589918,9.8789137 20.7832031,9.703125 C20.3964844,9.31640625 20.3964844,8.66015625 20.7832031,8.26171875 L20.7832031,8.26171875 Z M6.01757812,6.50390625 C6.41601562,6.1171875 7.08398438,6.12890625 7.45898438,6.50390625 L7.45898438,6.50390625 L9.20507812,8.26171875 C9.59179688,8.6484375 9.59179688,9.328125 9.19335938,9.703125 C8.80664062,10.1015625 8.15039062,10.1015625 7.75195312,9.703125 L7.75195312,9.703125 L6.00585938,7.9453125 C5.63085938,7.55859375 5.63085938,6.890625 6.01757812,6.50390625 Z M14.9941406,2.77734375 C15.5566406,2.77734375 16.0253906,3.24609375 16.0253906,3.796875 L16.0253906,3.796875 L16.0253906,6.2578125 C16.0253906,6.80859375 15.5566406,7.27734375 14.9941406,7.27734375 C14.4433594,7.27734375 13.9746094,6.80859375 13.9746094,6.2578125 L13.9746094,6.2578125 L13.9746094,3.796875 C13.9746094,3.24609375 14.4433594,2.77734375 14.9941406,2.77734375 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero"></path>
						</g>
					</svg>
					<div class="rowTitle">
						<p class="name">True Tone</p>
						<p class="value">${selectedDisplay.trueTone}</p>
					</div>
				</div>
			`
		}
		
		if (selectedDisplay.display == undefined) {
			var display = ``
		} else {
			if (type == "models") {
				var diagonal = selectedDisplay.diagonal;
			} else {
				var diagonal = ``;
			}
			
			var display = `
				<div class="row">
					<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
							<path d="M20.359375,26.6132812 C20.8867188,26.6132812 21.3085938,26.1914062 21.3085938,25.6757812 C21.3085938,25.1484375 20.8867188,24.7148438 20.359375,24.7148438 L18.9179688,24.7148438 L18.5898438,22.453125 L25.9257812,22.453125 C27.9296875,22.453125 28.9375,21.4921875 28.9375,19.4414062 L28.9375,6.01171875 C28.9375,3.9609375 27.9296875,3 25.9257812,3 L4.01171875,3 C2.0078125,3 1,3.9609375 1,6.01171875 L1,19.4414062 C1,21.4921875 2.0078125,22.453125 4.01171875,22.453125 L11.3476562,22.453125 L11.0078125,24.7148438 L9.68359375,24.7148438 C9.16796875,24.7148438 8.74609375,25.1484375 8.74609375,25.6757812 C8.74609375,26.1914062 9.16796875,26.6132812 9.68359375,26.6132812 L20.359375,26.6132812 Z M25.890625,20.5664062 L4.046875,20.5664062 C3.23828125,20.5664062 2.88671875,20.2382812 2.88671875,19.4179688 L2.88671875,6.046875 C2.88671875,5.21484375 3.23828125,4.88671875 4.046875,4.88671875 L25.890625,4.88671875 C26.6875,4.88671875 27.0507812,5.21484375 27.0507812,6.046875 L27.0507812,19.4179688 C27.0507812,20.2382812 26.6875,20.5664062 25.890625,20.5664062 Z" id="􀢹" fill="#000000" fill-rule="nonzero"></path>
						</g>
					</svg>
					<div class="rowTitle">
						<p class="name">Display Type</p>
						<p class="value">${diagonal} ${selectedDisplay.display}</p>
					</div>
				</div>
			`
		}
		
		if (selectedDisplay.os == undefined) {
			var os = ``
		} else {
			if (type == "displays") {
				if (selectedDisplay.os == "current") {
					if (source == "applewatch") {
						var currentOS = current_watchos;
					} else {
						var currentOS = current_ios;
					}
				} else {
					var currentOS = selectedDisplay.os;
				}
			}
			
			if (type == "models") {
				if (models[source][selectedModel].os == "current") {
					if (source == "applewatch") {
						var currentOS = current_watchos;
					} else {
						var currentOS = current_ios;
					}
				} else {
					var currentOS = models[source][selectedModel].os;
				}
			}
			
			
			var os = `
				<div class="row">
					${osIcons[source]}
					<div class="rowTitle">
						<p class="name">Last Supported By</p>
						<p class="value">${osName[source] + " " + currentOS}</p>
					</div>
				</div>
			`
		}
			
		if (selectedDisplay.display == undefined) {
			$("#details").append(`
				<div class="row">
					<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
							<path d="M23,2 C24.6568542,2 26,3.34314575 26,5 L26,26 C26,27.6568542 24.6568542,29 23,29 L7,29 C5.34314575,29 4,27.6568542 4,26 L4,5 C4,3.34314575 5.34314575,2 7,2 L23,2 Z M23,4 L7,4 C6.48716416,4 6.06449284,4.38604019 6.00672773,4.88337887 L6,5 L6,26 C6,26.5128358 6.38604019,26.9355072 6.88337887,26.9932723 L7,27 L23,27 C23.5128358,27 23.9355072,26.6139598 23.9932723,26.1166211 L24,26 L24,5 C24,4.48716416 23.6139598,4.06449284 23.1166211,4.00672773 L23,4 Z M10,23 L10,25 L8,25 L8,23 L10,23 Z M14,23 L14,25 L12,25 L12,23 L14,23 Z M18,23 L18,25 L16,25 L16,23 L18,23 Z M22,23 L22,25 L20,25 L20,23 L22,23 Z M10,14 L10,16 L8,16 L8,14 L10,14 Z M14,14 L14,16 L12,16 L12,14 L14,14 Z M10,10 L10,12 L8,12 L8,10 L10,10 Z M14,10 L14,12 L12,12 L12,10 L14,10 Z M18,10 L18,12 L16,12 L16,10 L18,10 Z M22,10 L22,12 L20,12 L20,10 L22,10 Z M10,6 L10,8 L8,8 L8,6 L10,6 Z M14,6 L14,8 L12,8 L12,6 L14,6 Z M18,6 L18,8 L16,8 L16,6 L18,6 Z M22,6 L22,8 L20,8 L20,6 L22,6 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero"></path>
						</g>
					</svg>
					<div class="rowTitle">
						<p class="name">Resolution</p>
						<div class="containerMeasurement">
							<div class="measurement">
								<p class="label">@1&times;</p>
								<p class="value">${selectedDisplay[zoom].resolution.width} &times; ${selectedDisplay[zoom].resolution.height} px</p>
							</div>
							<div class="measurement scale">
								<p class="label">@${selectedDisplay.scale}&times;</p>
								<p class="value">${selectedDisplay[zoom].resolution.width * selectedDisplay.scale} &times; ${selectedDisplay[zoom].resolution.height * selectedDisplay.scale} px</p>
							</div>
						</div>
					</div>
				</div>
				${os}
				${ppi}
				<div class="row">
					<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
							<path d="M13.3398438,14.5 C14.0078125,14.5 14.5,14.0664062 14.5,13.4101562 C14.5,13.09375 14.3945312,12.8125 14.1835938,12.6015625 L10.5625,8.9921875 L7.31640625,5.91015625 L11.4179688,6.14453125 L12.390625,6.14453125 C13.0117188,6.14453125 13.4921875,5.7109375 13.4921875,5.078125 C13.4921875,4.4453125 13.0234375,4 12.390625,4 L5.88671875,4 C4.69140625,4 4,4.69140625 4,5.88671875 L4,12.390625 C4,13 4.45703125,13.4804688 5.078125,13.4804688 C5.69921875,13.4804688 6.14453125,13.0117188 6.14453125,12.390625 L6.14453125,11.40625 L5.91015625,7.31640625 L8.9921875,10.5625 L12.6015625,14.1953125 C12.8007812,14.40625 13.0585938,14.5 13.3398438,14.5 Z M24.4375,26.359375 C25.6328125,26.359375 26.3359375,25.6679688 26.3359375,24.4726562 L26.3359375,17.96875 C26.3359375,17.359375 25.8789062,16.8789062 25.2460938,16.8789062 C24.6367188,16.8789062 24.1796875,17.3476562 24.1796875,17.96875 L24.1796875,18.953125 L24.4257812,23.0429688 L21.3320312,19.796875 L17.734375,16.1640625 C17.5351562,15.953125 17.265625,15.859375 16.984375,15.859375 C16.328125,15.859375 15.8242188,16.2929688 15.8242188,16.9492188 C15.8242188,17.265625 15.9414062,17.546875 16.1523438,17.7578125 L19.7617188,21.3671875 L23.0195312,24.4492188 L18.9179688,24.2148438 L17.9335938,24.2148438 C17.3125,24.2148438 16.8320312,24.6484375 16.8320312,25.28125 C16.8320312,25.9140625 17.3125,26.359375 17.9335938,26.359375 L24.4375,26.359375 Z" id="􀅊" fill="#000000" fill-rule="nonzero" transform="translate(15.167969, 15.179688) scale(-1, 1) translate(-15.167969, -15.179688) "></path>
						</g>
					</svg>
					<div class="rowTitle">
						<p class="name">Aspect Ratio</p>
						<p class="value">${selectedDisplay.ratio}</p>
					</div>
				</div>
				${contrast}
				${trueTone}
				${display}
			`)
		} else {
			$("#details").append(`
				<div class="row">
					<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
							<path d="M23,2 C24.6568542,2 26,3.34314575 26,5 L26,26 C26,27.6568542 24.6568542,29 23,29 L7,29 C5.34314575,29 4,27.6568542 4,26 L4,5 C4,3.34314575 5.34314575,2 7,2 L23,2 Z M23,4 L7,4 C6.48716416,4 6.06449284,4.38604019 6.00672773,4.88337887 L6,5 L6,26 C6,26.5128358 6.38604019,26.9355072 6.88337887,26.9932723 L7,27 L23,27 C23.5128358,27 23.9355072,26.6139598 23.9932723,26.1166211 L24,26 L24,5 C24,4.48716416 23.6139598,4.06449284 23.1166211,4.00672773 L23,4 Z M10,23 L10,25 L8,25 L8,23 L10,23 Z M14,23 L14,25 L12,25 L12,23 L14,23 Z M18,23 L18,25 L16,25 L16,23 L18,23 Z M22,23 L22,25 L20,25 L20,23 L22,23 Z M10,14 L10,16 L8,16 L8,14 L10,14 Z M14,14 L14,16 L12,16 L12,14 L14,14 Z M10,10 L10,12 L8,12 L8,10 L10,10 Z M14,10 L14,12 L12,12 L12,10 L14,10 Z M18,10 L18,12 L16,12 L16,10 L18,10 Z M22,10 L22,12 L20,12 L20,10 L22,10 Z M10,6 L10,8 L8,8 L8,6 L10,6 Z M14,6 L14,8 L12,8 L12,6 L14,6 Z M18,6 L18,8 L16,8 L16,6 L18,6 Z M22,6 L22,8 L20,8 L20,6 L22,6 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero"></path>
						</g>
					</svg>
					<div class="rowTitle">
						<p class="name">Resolution</p>
						<div class="containerMeasurement">
							<div class="measurement">
								<p class="label">@1&times;</p>
								<p class="value">${selectedDisplay[zoom].resolution.width} &times; ${selectedDisplay[zoom].resolution.height} px</p>
							</div>
							<div class="measurement scale">
								<p class="label">@${selectedDisplay.scale}&times;</p>
								<p class="value">${selectedDisplay[zoom].resolution.width * selectedDisplay.scale} &times; ${selectedDisplay[zoom].resolution.height * selectedDisplay.scale} px</p>
							</div>
						</div>
					</div>
				</div>
				${os}
				<details>
					<summary>Properties</summary>
					${ppi}
					<div class="row">
						<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
								<path d="M13.3398438,14.5 C14.0078125,14.5 14.5,14.0664062 14.5,13.4101562 C14.5,13.09375 14.3945312,12.8125 14.1835938,12.6015625 L10.5625,8.9921875 L7.31640625,5.91015625 L11.4179688,6.14453125 L12.390625,6.14453125 C13.0117188,6.14453125 13.4921875,5.7109375 13.4921875,5.078125 C13.4921875,4.4453125 13.0234375,4 12.390625,4 L5.88671875,4 C4.69140625,4 4,4.69140625 4,5.88671875 L4,12.390625 C4,13 4.45703125,13.4804688 5.078125,13.4804688 C5.69921875,13.4804688 6.14453125,13.0117188 6.14453125,12.390625 L6.14453125,11.40625 L5.91015625,7.31640625 L8.9921875,10.5625 L12.6015625,14.1953125 C12.8007812,14.40625 13.0585938,14.5 13.3398438,14.5 Z M24.4375,26.359375 C25.6328125,26.359375 26.3359375,25.6679688 26.3359375,24.4726562 L26.3359375,17.96875 C26.3359375,17.359375 25.8789062,16.8789062 25.2460938,16.8789062 C24.6367188,16.8789062 24.1796875,17.3476562 24.1796875,17.96875 L24.1796875,18.953125 L24.4257812,23.0429688 L21.3320312,19.796875 L17.734375,16.1640625 C17.5351562,15.953125 17.265625,15.859375 16.984375,15.859375 C16.328125,15.859375 15.8242188,16.2929688 15.8242188,16.9492188 C15.8242188,17.265625 15.9414062,17.546875 16.1523438,17.7578125 L19.7617188,21.3671875 L23.0195312,24.4492188 L18.9179688,24.2148438 L17.9335938,24.2148438 C17.3125,24.2148438 16.8320312,24.6484375 16.8320312,25.28125 C16.8320312,25.9140625 17.3125,26.359375 17.9335938,26.359375 L24.4375,26.359375 Z" id="􀅊" fill="#000000" fill-rule="nonzero" transform="translate(15.167969, 15.179688) scale(-1, 1) translate(-15.167969, -15.179688) "></path>
							</g>
						</svg>
						<div class="rowTitle">
							<p class="name">Aspect Ratio</p>
							<p class="value">${selectedDisplay.ratio}</p>
						</div>
					</div>
					${contrast}
					${trueTone}
					${display}
				</details>
			`)
		}
		
		//DISPLAY MODELS
		if(selectedDisplay.models == undefined || type == "models") {} else {
			if(source == "carplay") {
				//SET THE STRUCTURE
				$("#result").append(`
					<h3>Supported on</h3>
					<section id="models"></section>
				`)
				
				//DISPLAY EACH MODEL
				$.each( selectedDisplay.models, function( key, val ) {
					$("#models").append(`
						<div class="model">
							<img src="images/devices/iphone-${val}.png" width="128" height="128" />
							<p class="name">${models.iphone[val].name}</p>
							<p class="year">${models.iphone[val].year}</p>
						</div>
					`)
				});
			} else {
				//SET THE STRUCTURE
				$("#result").append(`
					<h3>Models</h3>
					<section id="models"></section>
				`)
				
				//DISPLAY EACH MODEL
				$.each( selectedDisplay.models, function( key, val ) {
					$("#models").append(`
						<div class="model">
							<img src="images/devices/${source}-${val}.png" width="128" height="128" />
							<p class="name">${models[source][val].name}</p>
							<p class="year">${models[source][val].year}</p>
						</div>
					`)
				});
			}
		}
		
		//DISPLAY SAFE AREAS
		if(selectedDisplay[zoom].safeAreas == undefined) {} else {
			$("#result").append(`
				<h3>Safe Areas</h3>
				<section id="safeAreas"></section>
				<p>When creating your layout you should not hard code fixed sizes. Learn more about using <a href="https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/" target="_blank">Adaptive Layout</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/env()" target="_blank">CSS Environment Variables</a>.</p>
			`)
			
			$.each( selectedDisplay[zoom].safeAreas, function( key, val ) {
				if (key == "notchheight") {} else {
					if (key =="notchwidth") {
						$("#safeAreas").append(`
							<div class="row">
								${regionIcons[key]}
								<div class="rowTitle">
									<p class="name">Notch Size</p>
									<div class="containerMeasurement">
										<div class="measurement">
											<p class="label">@1&times;</p>
											<p class="value">${val} &times; ${selectedDisplay[zoom].safeAreas.notchheight} px</p>
										</div>
										<div class="measurement scale">
											<p class="label">@${selectedDisplay.scale}&times;</p>
											<p class="value">${val * selectedDisplay.scale} &times; ${selectedDisplay[zoom].safeAreas.notchheight * selectedDisplay.scale}  px</p>
										</div>
									</div>
								</div>
							</div>
							<div class="row">
								${regionIcons.ears}
								<div class="rowTitle">
									<p class="name">Ear Size</p>
									<div class="containerMeasurement">
										<div class="measurement">
											<p class="label">@1&times;</p>
											<p class="value">${(selectedDisplay[zoom].resolution.width - val)/2} &times; ${selectedDisplay[zoom].safeAreas.notchheight} px</p>
										</div>
										<div class="measurement scale">
											<p class="label">@${selectedDisplay.scale}&times;</p>
											<p class="value">${(selectedDisplay[zoom].resolution.width - val)/2 * selectedDisplay.scale} &times; ${selectedDisplay[zoom].safeAreas.notchheight * selectedDisplay.scale}  px</p>
										</div>
									</div>
								</div>
							</div>
						`)
					} else {
						$("#safeAreas").append(`
							<div class="row">
								${regionIcons[key]}
								<div class="rowTitle">
									<p class="name">${regionName[key]}</p>
									<div class="containerMeasurement">
										<div class="measurement">
											<p class="label">@1&times;</p>
											<p class="value">${val} px</p>
										</div>
										<div class="measurement scale">
											<p class="label">@${selectedDisplay.scale}&times;</p>
											<p class="value">${val * selectedDisplay.scale} px</p>
										</div>
									</div>
								</div>
							</div>
						`)
					}
				}
			});
		}
		
		//DISPLAY MULTITASKING
		if(selectedDisplay[zoom].multitasking == undefined) {} else {
			$("#result").append(`
				<h3>Multitasking</h3>
				<section id="multitasking"></section>
			`)
			
			$.each( selectedDisplay[zoom].multitasking, function( key, val ) {
				$("#multitasking").append(`
					<div class="row">
						${regionIcons[key]}
						<div class="rowTitle">
							<p class="name">${regionName[key]}</p>
							<div class="containerMeasurement">
								<div class="measurement">
									<p class="label">@1&times;</p>
									<p class="value">${val.width}  &times; ${val.height} px</p>
								</div>
								<div class="measurement scale">
									<p class="label">@${selectedDisplay.scale}&times;</p>
									<p class="value">${val.width * selectedDisplay.scale} &times; ${val.height * selectedDisplay.scale} px</p>
								</div>
							</div>
						</div>
					</div>
				`)
			});
		}
		
		//DISPLAY SIZE CLASSES
		if(selectedDisplay[zoom].sizeClasses == undefined) {} else {
			$("#result").append(`
				<h3>Size Classes</h3>
				<section id="sizeClasses"></section>
			`)
			
			$.each( selectedDisplay[zoom].sizeClasses, function( key, val ) {
				$("#sizeClasses").append(`
					<div class="row">
						${regionIcons[key]}
						<div class="rowTitle">
							<p class="name">${regionName[key]}</p>
							<div class="containerMeasurement">
								<div class="measurement">
									<p class="label">Width</p>
									<p class="value">${val.width}</p>
								</div>
								<div class="measurement">
									<p class="label">Height</p>
									<p class="value">${val.height}</p>
								</div>
							</div>
						</div>
					</div>
				`)
			});
		}
		
		//DISPLAY WIDGET SIZES
		if(selectedDisplay[zoom].widgets == undefined) {} else {
			if (type == "displays") {
				$("#result").append(`
					<h3>Widgets</h3>
					<section id="widgets"></section>
				`)
				
				$.each( selectedDisplay[zoom].widgets, function( key, val ) {
					$("#widgets").append(`
						<div class="row">
							${regionIcons[key]}
							<div class="rowTitle">
								<p class="name">${regionName[key]}</p>
								<div class="containerMeasurement">
									<div class="measurement">
										<p class="label">@1&times;</p>
										<p class="value">${val.width} &times; ${val.height} px</p>
									</div>
									<div class="measurement">
										<p class="label">@${selectedDisplay.scale}&times;</p>
										<p class="value">${val.width * selectedDisplay.scale} &times; ${val.height * selectedDisplay.scale} px</p>
									</div>
								</div>
							</div>
						</div>
					`)
				});
			} else {
				if (models[source][selectedModel].os == "current" || models[source][selectedModel].os >= 14) {
					$("#result").append(`
						<h3>Widgets</h3>
						<section id="widgets"></section>
					`)
					
					$.each( selectedDisplay[zoom].widgets, function( key, val ) {
						$("#widgets").append(`
							<div class="row">
								${regionIcons[key]}
								<div class="rowTitle">
									<p class="name">${regionName[key]}</p>
									<div class="containerMeasurement">
										<div class="measurement">
											<p class="label">@1&times;</p>
											<p class="value">${val.width} &times; ${val.height} px</p>
										</div>
										<div class="measurement">
											<p class="label">@${selectedDisplay.scale}&times;</p>
											<p class="value">${val.width * selectedDisplay.scale} &times; ${val.height * selectedDisplay.scale} px</p>
										</div>
									</div>
								</div>
							</div>
						`)
					});
				}
			}
			
		}
		
		if (selectedDisplay.scale == 1) {
			$(".scale").remove();
		}
		
		//DISPLAY ALL PROPERTIES ON TALL DISPLAYS
		if (window.matchMedia("(min-height: 1025px)").matches) {
			$("details").attr("open", "")
		} else {};
		
		//TOOLBAR SCROLL SHADOW
		toolbarShadow("#result", "main header");
	}
	
	var generateLink = function(id) {
		//CLEAR OUT THE MAIN PANEL
		$("main").empty();
		$("main").addClass("noSegmentedControl");
		
		//SET THE HEADER
		switch (id) {
			case 'versions':
				var headingText = "Version History";
				var url = "https://toast-studio.com/screen-sizes/version-history/";
				break;
			case 'support':
				var headingText = "Feedback and Support";
				var url = "https://toast-studio.com/screen-sizes/support/";
				break;
			case 'privacy':
				var headingText = "Privacy Policy";
				var url = "https://toast-studio.com/screen-sizes/privacy/";
				break;
			case 'simplescales':
				var headingText = "Simple Scales";
				var url = "https://toast-studio.com/simple-scales/";
				break;
			case 'lifecast':
				var headingText = "Lifecast";
				var url = "https://toast-studio.com/lifecast/";
				break;
			case 'typedex':
				var headingText = "TypeDex";
				var url = "https://toast-studio.com/typedex/";
				break;
			case 'critterdex':
				var headingText = "CritterDex";
				var url = "https://toast-studio.com/critterdex/";
				break;
			case 'linkbadges':
				var headingText = "Link Badges";
				var url = "https://toast-studio.com/link-badges/";
				break;
			case 'chris':
				var headingText = "Christopher Muller";
				var url = "https://christophermuller.net";
				break;
			case 'trevor':
				var headingText = "Trevor Kay";
				var url = "https://www.trevorkay.me";
				break;
			case 'toast':
				var headingText = "Toast Studio";
				var url = "https://www.toast-studio.com";
				break;
			default:
				var headingText = "Toast";
				var url = "https://www.toast-studio.com";
		}
		
		
		$("main").append(`
			<header>
				<button id="buttonMainBack">
					<svg width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
							<path d="M11.0117188,20.9335938 C11.7851562,20.9335938 12.40625,20.3242188 12.40625,19.5390625 C12.40625,19.1523438 12.2421875,18.8125 11.984375,18.5429688 L3.76953125,10.5390625 L11.984375,2.53515625 C12.2421875,2.265625 12.40625,1.9140625 12.40625,1.5390625 C12.40625,0.75390625 11.7851562,0.14453125 11.0117188,0.14453125 C10.625,0.14453125 10.296875,0.28515625 10.0390625,0.54296875 L0.921875,9.4609375 C0.59375,9.77734375 0.44140625,10.1289062 0.44140625,10.5390625 C0.44140625,10.9492188 0.59375,11.3007813 0.921875,11.6054688 L10.0390625,20.5351562 C10.296875,20.7929688 10.625,20.9335938 11.0117188,20.9335938 Z" fill="#000000" fill-rule="nonzero"></path>
						</g>
					</svg>
					<span>Info</span>
				</button>
				<h1>${headingText}</h1>
			</header>
			<iframe src="${url}"></iframe>
		`)
		
		//TOOLBAR SHADOW
		$("main header").addClass("shadow");
	}
	
	//SHARE BUTTON
	if (navigator.share) {
		$(document).on('click', '#buttonShare', function() {
			if (selectedModel == undefined) {
				navigator.share({
					title: `Screen Sizes`,
					url: `https://www.screensizes.app?source=${source}&type=${type}&id=${id}`
				}).then(() => {
					console.log('Share completed');
				})
				.catch(err => {
					console.log(`Couldn't share because:`, err.message);
				});
			} else {
				navigator.share({
					title: `Screen Sizes`,
					url: `https://www.screensizes.app?source=${source}&type=${type}&id=${id}&model=${selectedModel}`
				}).then(() => {
					console.log('Share completed');
				})
				.catch(err => {
					console.log(`Couldn't share because:`, err.message);
				});
			}
		});
	}
	
	var routing = function() {
		let urlSource = new URLSearchParams(window.location.search).get("source");
		let urlType = new URLSearchParams(window.location.search).get("type");
		let urlId = new URLSearchParams(window.location.search).get("id");
		let urlModel = new URLSearchParams(window.location.search).get("model");
		
		if (urlSource == undefined) {
			//LOAD THE FIRST DEVICE ON LARGE SCREENS SO THERE ISN'T A BLANK STATE
			if (window.matchMedia("(min-width: 768px)").matches) {
				source = "iphone";
				type = "displays";
				id = "015";
				// selectedModel = urlModel;
				var deviceArray = properties[source].categories
				selectedDisplay = deviceArray.find(item => item.internalID === (id));
				zoom = "standard";
				
				generateSupplementary();
				
				//SELECTION STATES
				$("aside nav button[data-source='" + source + "']").addClass("selected");
				$("#supplementary").addClass("active");
			}
			
			if (window.matchMedia("(min-width: 1080px)").matches) {
				source = "iphone";
				type = "displays";
				id = "015";
				// selectedModel = urlModel;
				var deviceArray = properties[source].categories
				selectedDisplay = deviceArray.find(item => item.internalID === (id));
				zoom = "standard";
				
				generateSupplementary();
				generateDevice();
				
				//SELECTION STATES
				$("aside nav button[data-source='" + source + "']").addClass("selected secondary");
				$("#listdevices button[data-id='" + id + "']").addClass("selected");
				$("#supplementary").addClass("active");
				$("main").addClass("active");
			}
		} else {
			//LOAD THE DEEP LINK
			if (urlType == undefined) {
				source = urlSource;
				
				if (source == "info") {
					generateInfo();
				} else {
					generateSupplementary();
				}
				
				//SELECTION STATES
				$("aside nav button[data-source='" + source + "']").addClass("selected");
				$("#supplementary").addClass("active");
			} else {
				source = urlSource;
				type = urlType;
				id = urlId;
				selectedModel = urlModel;
				var deviceArray = properties[source].categories
				selectedDisplay = deviceArray.find(item => item.internalID === (id));
				zoom = "standard";
				
				generateSupplementary();
				generateDevice();
				
				//SELECTION STATES
				$("aside nav button[data-source='" + source + "']").addClass("selected secondary");
				if (urlModel == null) {
					$("#listdevices button[data-id='" + id + "']").addClass("selected");
					var elmnt = document.querySelector("button[data-id='" + id + "']");
				} else {
					$("#listdevices button[data-model='" + urlModel + "']").addClass("selected");
					var elmnt = document.querySelector("button[data-model='" + urlModel + "']");
				}
				elmnt.scrollIntoView();
				$("#supplementary").addClass("active");
				$("main").addClass("active");
			}
		}
	}
	
	//FIRST RUN
	//CHECK INSTALLED VERSION AND DISPLAY UPDATE PANEL IF NECESSARY
	//OLDER VERSION FOUND
	if (localStorage.getItem("version") !== version) {
		$("body").append(`
			<div class="containerPanel" id="panelUpdate">
				<div class="panel">
					<h1>What's New</h1>
					<button>Done</button>
					<ul>
						<li>Welcome to the first version of Screen Sizes</li>
					</ul>
				</div>
			</div>
		`)
	}
	
	//NO VERSION FOUND
	if (localStorage.getItem("version") == undefined) {
		localStorage.setItem("version", version);
		$("#panelUpdate").remove();
	}
	
	//CLEAR THE UPDATE PANEL
	$(document).on('click', '#panelUpdate button', function() {
		localStorage.setItem("version", version);
		$("#panelUpdate").remove();
	});
	
	//INSTALL PANEL
	if (localStorage.getItem("installed") != "true") {
		$("body").append(`
			<div id="containerInstall">
				<div id="panelInstall">
					<button>
						<svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							<g stroke="none" stroke-width="1" fill-rule="evenodd">
								<path d="M1.47292423,14.6766374 C0.64878803,14.6766374 0,14.0103146 0,13.2037132 C0,12.8004126 0.1578133,12.4497163 0.43837033,12.1866942 L5.27797833,7.32955131 L0.43837033,2.47240841 C0.17534811,2.20938631 0,1.85869001 0,1.47292421 C0,0.64878801 0.64878803,0.01753481 1.47292423,0.01753481 C1.87622483,0.01753481 2.20938623,0.17534812 2.47240843,0.43837031 L7.34708613,5.29551311 L12.2392986,0.43837031 C12.5198556,0.12274368 12.853017,0 13.2387828,0 C14.0453842,0 14.711707,0.63125321 14.711707,1.45538941 C14.711707,1.84115521 14.5714285,2.17431661 14.2733367,2.45487361 L9.41619393,7.32955131 L14.2558019,12.1516245 C14.5188241,12.4497163 14.6941722,12.7828778 14.6941722,13.2037132 C14.6941722,14.0103146 14.0453842,14.6766374 13.221248,14.6766374 C12.8004126,14.6766374 12.4497163,14.5012893 12.1866941,14.2382671 L7.34708613,9.38112431 L2.50747803,14.2382671 C2.24445593,14.5188241 1.87622483,14.6766374 1.47292423,14.6766374 Z" id="reset_dark-path"></path>
							</g>
						</svg>							
					</button>
					<h1>Install Screen Sizes</h1>
					<p>Tap <img src="images/ui/share.svg" alt="the share button" width="20" height="25" /> and then <img src="/images/ui/addto.svg" alt="" width="20" height="20" /><span>Add to Home Screen</span></p>
				</div>
			</div>
		`)
	}
	
	//CLEAR THE INSTALL PANEL
	$(document).on('click', '#containerInstall button', function() {
		localStorage.setItem("installed", "true");
		$("#containerInstall").remove();
	});
	
	//SET PREFERRED APPEARANCE
	appearance = localStorage.getItem("appearance");
	switch (appearance) {
		case 'light':
			$("body").addClass("light-theme");
			break;
		case 'dark':
			$("body").addClass("dark-theme");
			break;
		default:
			localStorage.setItem("appearance", "system");
			appearance = "system";
	}
	
	//SET PREFERRED VIEW
	type = localStorage.getItem("type");
	if (type == undefined) {
		type = "displays"
		localStorage.setItem("type", "displays");
	}
	
	//ROUTING ON LOAD
	routing();
	
	//ROUTING ON BACK BUTTON EVENT
	window.addEventListener('popstate', function(e) {
		routing();
	});
	
	//MAIN FUNCTIONS
	//SELECTING THE SOURCE
	$(document).on('click', 'aside button', function() {
		//GET SELECTED SOURCE
		source = $(this).data("source");
		
		//SET THE INITIAL TYPE
		type = localStorage.getItem("type");
		
		//SET THE SIDEBAR SELECTED STATE
		$("#supplementary").empty();
		$("aside button").removeClass("selected secondary");
		$("main").removeClass("active");
		$(this).addClass("selected");
		$("main").empty();
		
		if (source == "info") {
			generateInfo();
		} else {
			generateSupplementary();
		}
		
		$("#supplementary").addClass("active");
		
		//PUSH URL
		window.history.pushState(null, null, `?source=${source}`);
	});
	
	//CHANGING THE TYPE
	$(document).on('click', '#type button', function() {
		//SET THE TYPE
		type = $(this).data("type");
		
		//DISPLAY THE SELECTED DEVICE
		generateSupplementary();
		
		//CLEARING OUT THE MAIN COLUMN
		$("main").removeClass("active");
		$("main").empty();
	});
	
	//SELECTING THE DISPLAY SIZE
	$(document).on('click', '#listDevices nav button:not(.buttonSettings), #containerToast', function() {
		//GET THE SELECTED ID
		id = $(this).data("id");
		
		//SET THE SUPPLEMENTARY SELECTED STATE
		$("#listDevices nav button").removeClass("selected");
		$(this).addClass("selected");
		$("aside .selected").addClass("secondary");
		
		//DISPLAY THE SELECTED DEVICE
		if (source == "info") {
			generateLink(id);
		} else {
			//GET THE SELECTED MODEL
			selectedModel = $(this).data("model");
			
			//SET THE INITIAL ZOOM MODE
			zoom = "standard";
			
			//FIND THE MATCHING DEVICE DATA
			var deviceArray = properties[source].categories
			selectedDisplay = deviceArray.find(item => item.internalID === (id));
			
			generateDevice();
			
			//PUSH URL
			if (selectedModel == undefined) {
				window.history.pushState(null, null, `?source=${source}&type=${type}&id=${id}`);
			} else {
				window.history.pushState(null, null, `?source=${source}&type=${type}&id=${id}&model=${selectedModel}`);
			}
			
		}
		$("main").addClass("active");
		
		
	});
	
	//CHANGING THE ZOOM MODE
	$(document).on('click', '#zoom button', function() {
		//SET THE ZOOM MODE
		zoom = $(this).data("zoom");
		
		//DISPLAY THE SELECTED DEVICE
		generateDevice();
	});
	
	//BACK BUTTONS
	$(document).on('click', '#buttonSupplementaryBack', function() {
		$("#supplementary").removeClass("active");
		$("aside button").removeClass("selected");
		
		//PUSH URL
		window.history.pushState(null, null, `?`);
	});
	
	$(document).on('click', '#buttonMainBack', function() {
		$("main").removeClass("active");
		$("aside button").removeClass("secondary");
		$("#listDevices nav button").removeClass("selected");
		
		//PUSH URL
		window.history.pushState(null, null, `?source=${source}`);
	});
	
	//CONTEXT MENUS
	//DISMISS MENU BY CLICKING OUTSIDE OF THE MENU
	$(document).on('click', '.contextactive', function() {
		$("#menuAppearance, #menuView").removeClass("expanded");
		$("body").removeClass("contextactive");
	});
	
	//APPEARANCE SETTING
	$(document).on('click', '#appearance', function() {
		$("#menuView").removeClass("expanded");
		$("#menuAppearance").toggleClass("expanded");
		$("body").addClass("contextactive");
	});
	
	$(document).on('click', '#menuAppearance li', function() {
		appearance = $(this).data("option");
		switch (appearance) {
			case 'system':
				$("body").removeClass("light-theme dark-theme");
				break;
			case 'light':
				$("body").removeClass("dark-theme").addClass("light-theme");
				break;
			case 'dark':
				$("body").removeClass("light-theme").addClass("dark-theme");
				break;
			default:
				$("body").removeClass("light-theme dark-theme");
		}
		localStorage.setItem("appearance", appearance);
		$('#menuAppearance li').removeClass("picked");
		$(this).addClass("picked");
		$("#appearance").empty().append(appearance);
		$("#menuAppearance").toggleClass("expanded");
	});
	
	//VIEW SETTING
	$(document).on('click', '#view', function() {
		$("#menuAppearance").removeClass("expanded");
		$("#menuView").toggleClass("expanded");
		$("body").addClass("contextactive");
	});
	
	$(document).on('click', '#menuView li', function() {
		type = $(this).data("option");
		localStorage.setItem("type", type);
		$('#menuView li').removeClass("picked");
		$(this).addClass("picked");
		$("#view").empty().append(type);
		$("#menuView").toggleClass("expanded");
	});
	
	//OPEN SCREEN TEST
	// $(document).on('click', 'aside h1', function() {
	// 	window.location.replace("/screen-test");
	// });
	
	//SHORTCUT KEYS
	$(document).keyup(function(e) {
		switch (e.key) {
			case '1':
				$("main").empty();
				$("main").removeClass("active");
				source = "iphone";
				type = localStorage.getItem("type");
				generateSupplementary();
				window.history.pushState(null, null, `?source=${source}`);
				$("aside button").removeClass("selected secondary");
				$("aside button[data-source='" + source + "']").addClass("selected");
				break;
			case '2':
				$("main").empty();
				$("main").removeClass("active");
				source = "ipad";
				type = localStorage.getItem("type");
				generateSupplementary();
				window.history.pushState(null, null, `?source=${source}`);
				$("aside button").removeClass("selected secondary");
				$("aside button[data-source='" + source + "']").addClass("selected");
				break;
			case '3':
				$("main").empty();
				$("main").removeClass("active");
				source = "ipodtouch";
				type = localStorage.getItem("type");
				generateSupplementary();
				window.history.pushState(null, null, `?source=${source}`);
				$("aside button").removeClass("selected secondary");
				$("aside button[data-source='" + source + "']").addClass("selected");
				break;
			case '4':
				$("main").empty();
				$("main").removeClass("active");
				source = "applewatch";
				type = localStorage.getItem("type");
				generateSupplementary();
				window.history.pushState(null, null, `?source=${source}`);
				$("aside button").removeClass("selected secondary");
				$("aside button[data-source='" + source + "']").addClass("selected");
				break;
			case '5':
				$("main").empty();
				$("main").removeClass("active");
				source = "appletv";
				type = localStorage.getItem("type");
				generateSupplementary();
				window.history.pushState(null, null, `?source=${source}`);
				$("aside button").removeClass("selected secondary");
				$("aside button[data-source='" + source + "']").addClass("selected");
				break;
			case '6':
				$("main").empty();
				$("main").removeClass("active");
				source = "carplay";
				generateSupplementary();
				window.history.pushState(null, null, `?source=${source}`);
				$("aside button").removeClass("selected secondary");
				$("aside button[data-source='" + source + "']").addClass("selected");
				break;
			case 'i':
				$("main").empty();
				$("main").removeClass("active");
				source = "info";
				generateInfo();
				window.history.pushState(null, null, `?source=${source}`);
				$("aside button").removeClass("selected secondary");
				break;
			case 'Shift':
				$("#containerShortcuts").toggleClass("hidden");
			default:
		}
	});
});